<template>
  <div class="books">
    <nav-bar />
    
    <div class="container">
      <!-- 筛选和搜索 -->
      <div class="filter-section">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-select v-model="filters.category" placeholder="选择分类" clearable>
              <el-option
                v-for="category in categories"
                :key="category.id"
                :label="category.name"
                :value="category.id"
              />
            </el-select>
          </el-col>
          
          <el-col :span="6">
            <el-select v-model="filters.sort" placeholder="排序方式" clearable>
              <el-option label="价格升序" value="price_asc" />
              <el-option label="价格降序" value="price_desc" />
              <el-option label="销量优先" value="sales" />
              <el-option label="评分优先" value="rating" />
            </el-select>
          </el-col>
          
          <el-col :span="12">
            <el-input
              v-model="searchQuery"
              placeholder="搜索图书名称或作者"
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button @click="handleSearch">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
      </div>

      <!-- 图书列表 -->
      <div class="books-grid">
        <book-card
          v-for="book in books"
          :key="book.id"
          :book="book"
          @click="$router.push(`/book/${book.id}`)"
        />
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[20, 40, 60]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import NavBar from '@/components/NavBar.vue'
import BookCard from '@/components/BookCard.vue'

const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(100)

const filters = ref({
  category: '',
  sort: ''
})

const categories = ref([
  { id: 1, name: '计算机' },
  { id: 2, name: '文学' },
  { id: 3, name: '历史' },
  { id: 4, name: '经济' },
  { id: 5, name: '管理' }
])

const books = ref([
  {
    id: 1,
    title: '深入理解计算机系统',
    author: 'Randal E. Bryant',
    price: 139.00,
    cover: 'https://via.placeholder.com/200x300/667eea/ffffff?text=CSAPP',
    rating: 4.8
  },
  {
    id: 2,
    title: '算法导论',
    author: 'Thomas H. Cormen',
    price: 128.00,
    cover: 'https://via.placeholder.com/200x300/764ba2/ffffff?text=算法导论',
    rating: 4.9
  },
  {
    id: 3,
    title: 'JavaScript高级程序设计',
    author: 'Nicholas C. Zakas',
    price: 99.00,
    cover: 'https://via.placeholder.com/200x300/f093fb/ffffff?text=JS高级',
    rating: 4.7
  },
  {
    id: 4,
    title: 'Python编程：从入门到实践',
    author: 'Eric Matthes',
    price: 89.00,
    cover: 'https://via.placeholder.com/200x300/f5576c/ffffff?text=Python',
    rating: 4.6
  },
  {
    id: 5,
    title: 'Vue.js实战',
    author: '梁灏',
    price: 79.00,
    cover: 'https://via.placeholder.com/200x300/36d1dc/ffffff?text=Vue实战',
    rating: 4.5
  },
  {
    id: 6,
    title: 'Django企业开发实战',
    author: '董伟明',
    price: 108.00,
    cover: 'https://via.placeholder.com/200x300/5b86e5/ffffff?text=Django',
    rating: 4.7
  }
])

const handleSearch = () => {
  // 实现搜索逻辑
  console.log('搜索:', searchQuery.value)
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}

onMounted(() => {
  // 加载图书数据
})
</script>

<style scoped>
.books {
  min-height: 100vh;
  background: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style>
